<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>账号安全</title>
		<link rel="stylesheet" type="text/css" href="../css/header.css" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/accountSafety.css" />
		<style type="text/css">
			.leftNav p:nth-child(6) a {
				color: #009AFE;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="porjectList">
				<div class="headerCon">
					<div class="header">
						<div class="logo">
							<a href="../index.html"><img src="../img/index/logo.png" /></a>
						</div>
						<ul class="nav">
							<li>
								<a href="">首页</a>
							</li>
							<li style="position: relative;" class="secNavPar">
								<a href="">热门文章</a>
								<div class="secNav">
									<p>赚钱教程</p>
									<p>圈内资讯</p>
									<p>项目推广</p>
								</div>
							</li>
							<li>
								<a href="">福利公社</a>
							</li>
							<li>
								<a href="">赚钱教程</a>
							</li>
							<li>
								<a href="">推客手册</a>
							</li>
						</ul>
						<div class="searchBtn"><img src="../img/index/search.png" class="search1" /><img src="../img/index/search_hover.png" class="search2" />搜索</div>
						<div class="user">
							<a href="login.html">登录</a>
							<a href="register.html" class="register">注册</a>
							<!--<img src="../img/index/user.png" class="userImg"/>-->
							<div class="userInfo">
								<span class="icons"></span>
								<p class="name">腿长一米八</p>
								<div class="incon">
									<p>我的任务</p>
									<p>我的收藏 <span style="color: #f00;"> (3)</span></p>
									<p>我的任务</p>
								</div>
								<p class="logout">退出登录</p>
							</div>
						</div>
						<div class="searchCon">
							<div class="search">
								<input type="text" />
								<span>搜索</span>
							</div>
							<div class="closeImg">
								<img src="../img/index/close.png" class="img1" />
								<img src="../img/index/close_hover.png" class="img2" //>
							</div>
						</div>
					</div>
				</div>
				<div class="navTitle"></div>
				<div class="container">
					<div class="lefts">
						<div class="headImg">
							<img src="../img/index/st93.png" />
							<p class="name">腿长一米八</p>
						</div>
						<div class="leftNav">
							<p>
								<a href="userInfo.html">个人资料</a>
							</p>
							<p>
								<a href="task.html">我的任务</a>
							</p>
							<p>
								<a href="userInfo.html">我的收藏 <span>(2)</span></a>
							</p>
							<p>
								<a href="userInfo.html">收益中心</a>
							</p>
							<p>
								<a href="userInfo.html">邀请返佣</a>
							</p>
							<p>
								<a href="userInfo.html">账户安全</a>
							</p>
							<p>退出登录</p>
						</div>
					</div>
					<div class="content">
						<p class="title">账户安全</p>
						<div class="item">
							<div class="imgCon"><img src="../img/icon/phone.png" alt="" /></div>
							<p>
								<span>手机号</span>
								<span>187****1234</span>
								<span></span>
							</p>
						</div>
						<div class="item">
							<div class="imgCon"><img src="../img/icon/pwd.png" alt="" /></div>
							<p>
								<span>登录密码</span>
								<span>187****1234</span>
								<span @click="showPwd">修改</span>
							</p>
						</div>
						<div class="item">
							<div class="imgCon"><img src="../img/icon/cash.png" alt="" /></div>
							<p>
								<span>提现账户</span>
								<span>未设置</span>
								<span @click="showCash">设置</span>
							</p>
						</div>
						<!--<div class="item">
							<div class="imgCon"><img src="../img/icon/cash.png" alt="" /></div>
							<p>
								<span>提现账户</span>
								<span>刘玉文,支付宝,15685883923</span>
								<span>修改</span>
							</p>
						</div>-->
					</div>
				</div>

			</div>
			<div class="footer">
				<div class="footerCon">
					<div class="left">
						<p class="tit">关于</p>
						<div class="info">
							推客星球（www.tuikestar.com）是一个帮您赚钱、省钱的社会化推广服务平台，以第三方身份整合全网优质赚钱项目、优惠福利信息。推客达人利用自己的碎片化时间，完成平台的推广任务，获得一定报酬的同时，还可了解每个项目的最新福利活动及赚钱攻略，也满足了项目方的产品推广需求。
						</div>
					</div>
					<div class="middle">
						<p class="tit">联系我们</p>
						<p class="p1">友链交换：tuikestar@162.com</p>
						<p class="p1">联合推广：tuikestar@162.com</p>
						<p class="p1">咨询QQ：547855740</p>
						<p class="p1">微信公众号：tuikestar2018</p>
						<div class="codes">
							<img src="../img/index/st93.png" />
							<p>微信扫一扫，关注我们</p>
						</div>
					</div>
					<div class="right">
						<p class="tit">合作伙伴</p>
						<div class="imgs">
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />
							<img src="../img/index/st93.png" />

						</div>
					</div>
				</div>
				<div class="footer_info">©2010-2018 - 推客星球 - 黔ICP备14037330号-1</div>
			</div>
			<div class="pop" v-show="isPwd">
				<div class="popCon">
					<p class="title">修改密码 <img src="../img/icon/close.png" @click="hidePwd" /></p>
					<div class="con">
						<p class="tit">原密码</p>
						<input type="password" value="" placeholder="请输入原密码" />
					</div>

					<div class="con">
						<p class="tit">新密码</p>
						<input type="password" value="" placeholder="请输入新密码" />
					</div>
					<p class="errorMsg">
						<img src="../img/icon/err.png" />请输入微信号
					</p>
					<div class="btns">
						<span>确定修改</span>
						<span @click="hidePwd">取消</span>
					</div>
				</div>
			</div>
			<div class="pop" v-show="iscash">
				<div class="popCon" style="height: 635px;">
					<p class="title">修改收款账户 <img src="../img/icon/close.png" @click="hideCash" /></p>
					<div class="con">
						<p class="tit">收款人</p>
						<input type="text" value="" />
					</div>
					<div class="con">
						<p class="tit">收款方式</p>
						<select name="" @change="changType" v-model="couponSelected" >
							<option value="1">支付宝</option>
							<option value="2">微信</option>
						</select>
					</div>
					<div class="con" v-if="couponSelected==1">
						<p class="tit">支付宝账号</p>
						<input type="text" value="" placeholder="请输入与收款人对应的支付宝账号" />
					</div>
					<div class="con" v-if="couponSelected==2">
						<p class="tit">微信号</p>
						<input type="text"  value="" placeholder="请输入与收款人对应的微信号"/>
					</div>
					<div class="con">
						<p class="tit" v-if="couponSelected==1">支付宝收款码</p>
						<p class="tit" v-if="couponSelected==2">微信收款码</p>
						<div class="codeImg">
							<div class="change">
								<input type="file" class="input-file" accpet="image/*">
								<p>重新上传</p>
							</div>
							<div class="add">
								<input type="file" class="input-file" accpet="image/*">
								<div class="icon">
									<img src="../img/icon/uplaod.png" />
									<p v-if="couponSelected==1">请上传您的支付宝收款码图片</p>
									<p v-if="couponSelected==2">请上传您的微信收款码图片</p>
								</div>
							</div>
							<!--<div class="add">
							<img src="../img/index/st93.png" class="code"/>
						</div>-->
						</div>
					</div>
					<p class="errorMsg">
						<img src="../img/icon/err.png" />请输入微信号
					</p>
					<div class="btns">
						<span>确定修改</span>
						<span @click="hideCash">取消</span>
					</div>
				</div>
			</div>
		</div>	
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="../js/headerCommon.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {});
		new Vue({
			el: '#app',
			data: {
				iscash: false,
				activeNum: 0,
				isPwd: false,
				couponSelected:1
			},
			methods: {
				showPwd() {
					this.isPwd = true
				},
				hidePwd() {
					this.isPwd = false
				},
				showCash() {
					this.iscash = true
				},
				hideCash() {
					this.iscash = false
				},
				changType(e) {
					
				}
			}
		});
	</script>

</html>